<template>
	<view>
		cart
	</view>
</template>

<script>
	/**
	 * 使用Vuex的辅助函数来调用
	 */
	import {mapState,mapGetters,mapMutations   } from "vuex"
	export default {
			computed:{
				...mapState({
					//cart表示挂在到Vuex上modules中定义的属性名称，cartList表示自定义模块中state的属性名
					cartList:state=>state.cart.cartList,  
					//userInfo表示挂在到Vuex上modules中定义的属性名称，user_info表示自定义模块中state的属性名
					//user随便取名
					user:state=>state.userInfo.user_info  
				}),
				/**
				 * 调用getters中的方法和调用state中的属性不一样，调用state还要加上modules中定义的属性名称
				 * 而调用getters方法则不需要加modules中定义的属性名称
				 */
				...mapGetters({
					//resultList随便取名，filterCartList对应自定义模块中getters中定义的方法
					resultList:'filterCartList',
					//这是一个传参例子，传参数是在调用的时候传入【this.paramResultList(3)】
					paramResultList:'paramFileteCartList',
					//getUser随便取名。get_user对应自定义模块中getters中定义的方法
					getUser:'get_user'
				}),
				
			
		}, 
		methods:{
			// mapMutations和mapActions不能再computed计算属性中引用，只能在methods中引用，否则调用传参方法的时候会报错的
			...mapMutations ({
				deleteCartList:"delete_cart_list",
				deleteByParam:"delete_cart_list_by_param",
				addCartList:"addCartList"
			})
		},
		onLoad() {
			/**
			 * 直接获取state中的数据
			 */
					console.log(this.cartList);
					console.log(this.user);
			/**
			 * 调用getters中的方法
			 */ 
					 // 1：调用无参构造
					 console.log(this.resultList)
					 console.log(this.getUser)
					 //2：调用有参构造
					 console.log(this.paramResultList(3))
			/**
			 * 调用mutations中的方法
			 */	
					//调用无参方法
					this.deleteCartList;
					//调用一个有参方法
					this.deleteByParam(parseInt(1));
					/**
					 * mutations不支持传入多个参数，若想传入多个参数请自己封装成JSON对象
					 */
					this.addCartList({"skuId":"123445","skuName":"苹果手机"})
			
		}
	} 
</script>

<style>

</style>
